$(function () {
    // daily
    var users = eval($('#data_users').val());
    var options = {
        series: {
            lines: { show: true },
            points: { show: true }
        },
        grid: { hoverable: true, clickable: true },
        xaxis: {mode: "time", timeformat: "%y/%m/%d"},
        legend: {
            "position": "nw"
        }
    };
    if (users)
        var plot = $.plot($("#users"),
            [ { data: users, label: "注册用户总数"} ], options);

    var conversions = eval($('#data_conversions').val());
    if (conversions)
        var plot = $.plot($("#conversions"),
            [ { data: conversions, label: "下载到注册转化率 %"} ], options);

    var has_trip_users = eval($('#data_has_trip_users').val());
    if (has_trip_users)
        var plot = $.plot($("#has_trip_users"),
            [ { data: has_trip_users, label: "建立行程的用户数"} ], options);

    var has_trip_users_rate = eval($('#data_has_trip_users_rate').val());
    if (has_trip_users_rate)
        var plot = $.plot($("#has_trip_users_rate"),
            [ { data: has_trip_users_rate, label: "建立行程的用户数比例 %"} ], options);

    var weibo_bindings = eval($('#data_weibo_bindings').val());
    if (weibo_bindings)
        var plot = $.plot($("#weibo_bindings"),
            [ { data: weibo_bindings, label: "微博绑定总数"} ], options);

    var login_users = eval($('#data_login_users').val());
    if (login_users)
        var plot = $.plot($("#login_users"),
            [ { data: login_users, label: "当天登录用户数"} ], options);

    var active_users = eval($('#data_active_users').val());
    if (active_users)
        var plot = $.plot($("#active_users"),
            [ { data: active_users, label: "活跃用户数"} ], options);

    var active_users_by_month = eval($('#data_active_users_by_month').val());
    if (active_users_by_month)
        var plot = $.plot($("#active_users_by_month"),
            [ { data: active_users_by_month, label: "活跃用户数(月)"} ], {
                series: {
                    lines: { show: true },
                    points: { show: true }
                },
                grid: { hoverable: true, clickable: true },
                xaxis: {mode: "time", timeformat: "%y/%m"}
            });

    var countries = eval($('#data_countries').val());
    if (countries)
        var plot = $.plot($("#countries"),
            [ { data: countries, label: "覆盖国家总数"} ], options);

    var provinces = eval($('#data_provinces').val());
    if (provinces)
        var plot = $.plot($("#provinces"),
            [ { data: provinces, label: "覆盖省份/州总数"} ], options);

    var cities = eval($('#data_cities').val());
    if (cities)
        var plot = $.plot($("#cities"),
            [ { data: cities, label: "覆盖城市总数"} ], options);

    var trips = eval($('#data_trips').val());
    if (trips)
        var plot = $.plot($("#trips"),
            [ { data: trips, label: "行程总数"} ], options);

    var public_trips = eval($('#data_public_trips').val());
    if (public_trips)
        var plot = $.plot($("#public_trips"),
            [ { data: public_trips, label: "公开行程总数"} ], options);

    var wifi_only_trips = eval($('#data_wifi_only_trips').val());
    if (wifi_only_trips)
        var plot = $.plot($("#wifi_only_trips"),
            [ { data: wifi_only_trips, label: "仅在WIIF同步的行程总数"} ], options);

    var waypoints = eval($('#data_waypoints').val());
    if (waypoints)
        var plot = $.plot($("#waypoints"),
            [ { data: waypoints, label: "拍照和留言总数"} ], options);

    var trackpoints = eval($('#data_trackpoints').val());
    if (trackpoints)
        var plot = $.plot($("#trackpoints"),
            [ { data: trackpoints, label: "追踪点总数"} ], options);

    var comments = eval($('#data_comments').val());
    if (comments)
        var plot = $.plot($("#comments"),
            [ { data: comments, label: "评论总数"} ], options);

    var likes = eval($('#data_likes').val());
    if (likes)
        var plot = $.plot($("#likes"),
            [ { data: likes, label: "赞总数"} ], options);

    var bookmarks = eval($('#data_bookmarks').val());
    if (bookmarks)
        var plot = $.plot($("#bookmarks"),
            [ { data: bookmarks, label: "收藏总数"} ], options);

    var two_side_friends = eval($('#data_two_side_friends').val());
    if (two_side_friends)
        var plot = $.plot($("#two_side_friends"),
            [ { data: two_side_friends, label: "朋友总数"} ], options);

    var weibo_syncs = eval($('#data_weibo_syncs').val());
    if (weibo_syncs)
        var plot = $.plot($("#weibo_syncs"),
            [ { data: weibo_syncs, label: "当天微博同步数"} ], options);

    var weibo_sync_users = eval($('#data_weibo_sync_users').val());
    if (weibo_sync_users)
        var plot = $.plot($("#weibo_sync_users"),
            [ { data: weibo_sync_users, label: "当天同步微博的用户数"} ], options);

    function showTooltip(x, y, contents) {
        $('<div id="tooltip">' + contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #fdd',
            padding: '2px',
            'background-color': '#fee',
            opacity: 0.80,
            "z-index": 65535,
        }).appendTo("body").fadeIn(200);
    }
    // Make it global
    window.showTooltip = showTooltip;

    var previousPoint = null;
    $("div.chart").bind("plothover", function (event, pos, item) {
        $("#x").text(pos.x.toFixed(2));
        $("#y").text(pos.y.toFixed(2));

        //if ($("#enableTooltip:checked").length > 0) {
        if (true) {
            if (item) {
                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;

                    $("#tooltip").remove();
                    var x = item.datapoint[0];
                    var y = item.datapoint[1];
                    if ( x > 1200000000) {
                        var date = new Date(x);
                        var year = date.getFullYear();
                        var month = date.getMonth() + 1;
                        var day = date.getDate();
                        showTooltip(item.pageX, item.pageY, year + '/' + month + '/' + day + ": " + y);
                    }
                    else {
                        showTooltip(item.pageX, item.pageY, x + ': ' + y);
                    }
                }
            }
            else {
                $("#tooltip").remove();
                previousPoint = null;
            }
        }
    });

    //$("div.chart").bind("plotclick", function (event, pos, item) {
        //if (item) {
            //$("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
            //plot.highlight(item.series, item.datapoint);
        //}
    //});

    // weekly
    var new_users = eval($('#data_new_users').val());
    var weekly_login_users = eval($('#data_weekly_login_users').val());
    if (new_users)
        var plot = $.plot($("#weekly"),
            [ {data: new_users, label: "注册用户数"}, {data: weekly_login_users, label: "登录用户数"}], {
                series: {
                    lines: { show: true },
                    points: { show: true }
                },
                grid: { hoverable: true, clickable: true },
                xaxis: {mode: "time", timeformat: "%y/%m/%d"}
            });

    // retention
    var day1 = eval($('#data_day1').val());
    var day2 = eval($('#data_day2').val());
    var day3 = eval($('#data_day3').val());
    var day4 = eval($('#data_day4').val());
    var day5 = eval($('#data_day5').val());
    var day6 = eval($('#data_day6').val());
    var day7 = eval($('#data_day7').val());
    var day15 = eval($('#data_day15').val());
    var day30 = eval($('#data_day30').val());
    if (day1)
        var plot = $.plot($("#retention"),
            [ {data: day1, label: "1天"},
              {data: day2, label: "2天"},
              {data: day3, label: "3天"},
              {data: day4, label: "4天"},
              {data: day5, label: "5天"},
              {data: day6, label: "6天"},
              {data: day7, label: "7天"},
              {data: day15, label: "15天"},
              {data: day30, label: "30天"}],
            {
                series: {
                    lines: { show: true },
                    points: { show: true }
                },
                grid: { hoverable: true, clickable: true },
                xaxis: {mode: "time", timeformat: "%y/%m/%d"}
            });

});
